<template>
  <Page :show-nav-bar="false" v-slot:default="{contentClass}">
    <div :class="contentClass" class="flex flex-col justify-center items-center">
      <div class="h-16"></div>
      <van-image :src="user.user.avatar" round width="5rem"></van-image>
      <span class="mt-3">{{user.user.nickname}}</span>

      <div class="mt-16">

        <div :style="{'backgroundRepeat': 'no-repeat', 'backgroundSize': 'cover'}">
          <div class="box-border " style="width: 20.43rem; margin: 0 auto; padding-top: 1rem;">
            <selector v-model="item.hospital" :columns="hospitalColumns" ref="selectorHospital" v-slot:default="{showValue}">
              <x-input @click="onHospitalClick"  :value="showValue"  label-width="5rem" label-style="color: #000;" label="院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区:" :classes="{'m-auto': true, 'rounded-lg': true}" :style="{'background-color': '#fff','padding': '.5rem', 'width': '19rem', 'marginTop':'1rem', 'border': '2px solid rgb(172 216 102)', 'font-size': '0.7875rem'}"></x-input>
            </selector>
            <x-input v-model="item.empno" label-width="5rem" label-style="color: #000;" label="工&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:" :classes="{'m-auto': true, 'rounded-lg': true}" :style="{'background-color': '#fff', 'padding': '.5rem', 'width': '19rem', 'marginTop':'1rem', 'border': '2px solid rgb(172 216 102)', 'font-size': '0.7875rem'}"></x-input>
            <x-input input-type="password" v-model="item.password" label-width="5rem" label-style="color: #000;" label="密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:" :classes="{'m-auto': true, 'rounded-lg': true}" :style="{'background-color': '#fff', 'padding': '.5rem', 'width': '19rem', 'marginTop':'1rem', 'border': '2px solid rgb(172 216 102)', 'font-size': '0.7875rem'}"></x-input>
          </div>
          <div class="flex justify-center items-center pt-8">
            <van-button type="primary" round @click="onApply">
              <template v-if="!apply">
                申请成为核销员
              </template>
              <template v-else="apply.verify_status==0">
                {{apply.verifyText}}
              </template>
            </van-button>
          </div>
        </div>

      </div>
    </div>
  </Page>
</template>

<script setup>
import {ref} from 'vue';
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import Page from "../components/Page.vue"
import Selector from "../components/Selector.vue";
import XInput from '../components/XInput.vue'
import {computed, onMounted, watch} from "vue";

import apis from '../apis'

const store = useStore()
const router = useRouter()
const route = useRoute()

const user = computed(() => store.state.user)
const apply = ref(null)

const hospitalColumns = ref([])
const selectorHospital = ref(null)

const item = ref({
  hospital: null,
  empno: null,
  password: null,
})

const onApply = () => {

  if (!item.value.hospital) {
    store.dispatch('message/showError', '请选择院区!')
    return
  }

  if (!item.value.empno) {
    store.dispatch('message/showError', '请输入工号!')
    return
  }

  if (!item.value.password) {
    store.dispatch('message/showError', '请输入密码!')
    return
  }

  const data = JSON.parse(JSON.stringify(item.value))

  data['hospital'] = item.value.hospital[0]

  apis.write_off_member.apply(data)

}

const onHospitalClick = () => {
  selectorHospital.value.show()
}

onMounted(async () => {
  await apis.write_off_member.show({}).then(({data: result}) => {
    apply.value = result.data
  })

  await apis.hospital.list({}).then(({data: result}) => {
    hospitalColumns.value = result.data.map((o) => {
      return {
        label: o.name,
        value: o.id
      }
    })
  })
})
</script>

<style scoped>

</style>